<template>
  <div class="relative " style="min-width: 1280px">
    <!-- 导航栏-->
    <z-header class="absolute"/>
    <!-- 轮播图-->
    <z-carousel/>
    <div class="p-20">
      <n-grid cols="3" item-responsive responsive="screen" x-gap="12" >
        <n-grid-item span="1">
          <div class="left-box">
            <span class="ali-font text-prRed block font-bold">About us</span>
            <span class="serif-sc-font text-black block text-60px font-bold">关于我们</span>
            <span class="ali-font text-prGray mb-10 block">从风雪弥漫到秋风再起，许多青春不在、多少豪情消减、无数机缘擦肩。</span>
          </div>
        </n-grid-item>
        <n-grid-item span="2">
          <div class="right-box p-9" style="background: rgba(247, 248, 250, 1)">
          <span class="ali-font text-black mb-10 block font-bold">
            《中国国家地理》，1950年创刊于江苏省南京市，原名《地理知识》，是关于地理的月刊，
            该刊的文章和图片经常被中央及地方媒体转载，具有很强的可读性和收藏价值，国内外很多家图书馆已经把该刊作为重点收藏期刊。
          </span>
            <n-button color="black"
                      style="border-radius: 0;width: 120px;height: 48px;font-size: 14px;font-family: AliHYH">查看更多
            </n-button>
          </div>
        </n-grid-item>
      </n-grid>
      <div class="pt-20 pb-10">
          <z-img-card v-for="item in tabImgList" :data="item" :key="item.id" class="mr-4"></z-img-card>
          <z-img-card v-for="item in tabImgList" :data="item" :key="item.id" class="mr-4"></z-img-card>
      </div>
      <n-grid cols="3" item-responsive responsive="screen">
        <n-grid-item span="1">
          <div class="left-box">
            <span class="ali-font text-prRed block font-bold">Ours characteristic</span>
            <span class="serif-sc-font text-black block text-60px font-bold">我们的特点</span>
            <span class="ali-font text-prGray mb-10 block">应运而生：时代与读者的双重选择</span>
          </div>
        </n-grid-item>
        <n-grid-item span="2">
          <n-space justify="space-around">
            <div  style="width: 154px">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-diqiuxingqiu"></use>
              </svg>
              <span class="serif-sc-font text-black block text-20px font-bold my-4">专业的科普</span>
              <span class="ali-font text-prGray block">以自然为核心的选题，揭示其对人类的影响</span>
            </div>
            <div  style="width: 154px">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shuben"></use>
              </svg>
              <span class="serif-sc-font text-black block text-20px font-bold my-4">亲近的文风</span>
              <span class="ali-font text-prGray block">用第一人称“我”来讲述，将您带入现场</span>
            </div>
            <div  style="width: 154px">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-window-01"></use>
              </svg>
              <span class="serif-sc-font text-black block text-20px font-bold my-4">舒适的设计</span>
              <span class="ali-font text-prGray block">版面设计简约、灵性，信息传达与阅读趣味兼具</span>
            </div>
          </n-space>
        </n-grid-item>
      </n-grid>
    </div>

  </div>
</template>

<script setup lang="ts">
import {GlobalThemeOverrides, useThemeVars} from 'naive-ui'

interface ImgTab {
  id: number,
  imgSrc: string,
  title: string,
  description: string,
}

const tabImgList = reactive<Array<ImgTab>>([
  {
    id: 1,
    imgSrc: 'http://img0.dili360.com/pic/2022/03/01/621df3080f0873e96487117.jpg@!rw9',
    title: '太湖流域',
    description: '全国河道分布密度最大的太湖流域，其水系循环是以太湖为中心来运转的。在水系“两进三出”的汇水与分水格局中，太湖就是掌控全局的那个“总开关”。来源《中国国家地理》2022年2期 摄影/王鹏飞'
  }, {
    id: 2,
    imgSrc: 'http://img0.dili360.com/pic/2022/03/01/621df337ee3a27v11091322.jpg@!rw9',
    title: '太湖流域',
    description: '来源《中国国家地理》2022年2期 摄影/钱伟'
  }, {
    id: 3,
    imgSrc: 'http://img0.dili360.com/pic/2022/03/01/621df3542f9485w64771836.jpg@!rw9',
    title: '太湖流域',
    description: '来源《中国国家地理》2022年2期 摄影/刘剑伟'
  }
])
const imageGroupThemeOverrides = computed(() => {
  const {popoverColor, boxShadow2, textColor2, borderRadius} =
      useThemeVars().value
  const themeOverrides: NonNullable<GlobalThemeOverrides['Image']> = {
    toolbarColor: popoverColor,
    toolbarBoxShadow: boxShadow2,
    toolbarIconColor: textColor2,
    toolbarBorderRadius: borderRadius
  }
  return themeOverrides
})
</script>

<style scoped lang="scss">

</style>
